<template>
  <div class="container">
    <Header v-if="showHeader" title="下属员工详情"></Header>
    <div class="user_info_base">
      <img class="user_pic" v-if="user_info.head_img" :src="user_info.head_img" alt="头像" />
      <img class="user_pic" v-else :src="pic" alt="头像" />
      <ul>
        <li class="one-txt-cut uesr_name">{{user_info.staffer_name}}</li>
        <li class="one-txt-cut">职位：{{user_info.job_name}}</li>
        <li class="one-txt-cut">
          <span>电话：{{user_info.phone}}</span>
          <a :href="'tel:'+user_info.phone">
            <img :src="telIcon" alt="手机号" @click="callPhone(user_info.phone)" />
          </a>
        </li>
      </ul>
    </div>
    <!--滑动区域 ref='mescroll'不能删, 目的是路由切换时可通过ref调用mescroll-vue组件的beforeRouteEnter方法-->
    <mescroll-vue ref="subCollapseListMescroll" :up="mescrollUp" @init="mescrollInit">
      <div id="subCollapseLists">
        <ListCollapse :collapseList="collapseList" switchShow="sevenDelay"></ListCollapse>
      </div>
    </mescroll-vue>
  </div>
</template>
<script>
import MescrollVue from "mescroll.js/mescroll.vue";
import { historyV3 } from "@/request/api.js";
import ListCollapse from "@/components/business/ListCollapse.vue";
import Header from "@/components/Header.vue";
export default {
  name: "SubordinatesInfo",
  data() {
    return {
      pic:require("@/assets/images/morentouxiang.png"),
      telIcon: require("@/assets/images/tel_icon.png"),
      showHeader: this.$store.state.showHeader,
      mescroll: null,
      collapseList: [],
      mescrollUp: {
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
        page: {
            num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
            limit: 10 // 每页数据的数量
        },
        noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        empty: {
          // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
          warpId: "subCollapseLists", // 父布局的id;
          tip: "没有更多了~" // 提示
        },
        htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>' // 无数据的布局
      },
      user_info:{
        head_img: "",
        staffer_name: "",
        job_name: "",
        phone: "",
      }
    };
  },
  components: {
    ListCollapse,
    Header,
    MescrollVue
  },
  created() {
    this.staffer_id = this.$route.query.staffer_id;
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      // console.log('pages'+page.num)
      // 联网加载数据
      historyV3({
        token: this.$store.state.token,
        staffer_id: this.staffer_id,
        page:page.num,
        page_num:page.limit
      }).then(res => {
          // console.log(res)
          let data = res.data;
          this.user_info = data.user_info;
          let list = data.history;
          // let result = [];
          if(list){
              // 如果是第一页需手动置空列表
              if (page.num === 1) this.collapseList = []
              // 把请求到的数据添加到列表
              this.collapseList = this.collapseList.concat(list) 
          };
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
              mescroll.endSuccess(list.length)
          })
      }).catch(error => {
        console.log(error);
        mescroll.endErr();
      });
    },
    //调用原生的电话
    callPhone(phone) {
      console.log(111);
      console.log(phone);
      this.$bridge.callhandler("takePhone", phone, responseCallback => {
        // 处理返回数据
        console.log("JS Echo called with:", phone);
        // responseCallback(phone);
        return false;
      });
    }
  },
};
</script>
<style lang="less" scoped>
.container{
    width: 100%;
    height: 100%;
    background: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.user_info_base {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid #f5f5f5;
  background-color: #fff;
  padding: 10px 15px;
  box-sizing: border-box;
  img {
    display: block;
    width: 70px;
    height: 70px;
  }
  .user_pic {
    border-radius: 50%;
  }
  ul {
    height: auto;
    padding-left: 20px;
    box-sizing: border-box;
    overflow: hidden;
    flex: 3;
    li {
      width: 100%;
      height: 25px;
      font-size: 14px;
      color: #151617;
      a {
        float: right;
        img {
          width: 15px;
          height: 15px;
        }
      }
    }
    .uesr_name {
      font-size: 15px;
      font-weight: bold;
    }
  }
}
.mescroll {
  position: fixed;
  top: 96px;
  bottom: 0;
  height: auto;
  background-color: #f7f7f7;
}
</style>